<template>
  <div class="overhaul flowCloumn h100">
    <div class="constentmain h100">
      <div class="tableContent">
        <listTableNew v-bind="tableSetting" ref="klTable"></listTableNew>
      </div>
      <div class="annotations list-table-main">
        注：
        <span class="circle normal-bg"></span>
        按期的工单
        <span class="circle remind-bg"></span>
        即将到期的工单
        <span class="circle warning-bg"></span>
        已超期的工单
        <span class="circle gray-bg"></span>
        已废弃工单
      </div>
    </div>
  </div>
</template>
<script>
import {
  getListApi //列表
} from "@/api/orderManagement/overhaul";
export default {
  components: {},
  props: {},
  data() {
    return {
      userInfo: this.$store.getters.userInfo,
      pageType: "list",
      formData: {},
      currentDevice: {},
      tableSetting: {
        // selectionShow: true,
        showCustomBtn: true,
        showFilterBtn: true,
        pageConfig: {
          pageCode: "overhaul", //页面标识，用来存储过滤器以及自定义列的时候用
          userId: this.$store.getters.userInfo.id
        },
        searchObj: {
          searchMethod: (params, sortStr) => {
            this.getTableData(params, sortStr);
          },
          queryData: {
            page: 1,
            pageSize: 15
          },
          searchArr: [
            {
              type: "input",
              label: "标题",
              model: "title"
            },
            {
              type: "dept",
              label: "设备管理单位",
              model: "deptManageList",
              idsStr: "deptManage",
              // multiple: true,
              clearable: true
            },
            {
              type: "device",
              label: "设备",
              model: "equipmentName",
              idsStr: "equipmentId"
            },
            {
              type: "dept",
              label: "作业单位",
              model: "deptWorkList",
              // multiple: true,
              idsStr: "deptWork",
              clearable: true
            },
            {
              label: "状态",
              model: "status",
              type: "select",
              option: this.$store.getters["dirtData"]("overhaul_status")
            },
            {
              type: "input",
              label: "工单编号",
              model: "code"
            },
            {
              label: "创建时间",
              model: "createTime",
              type: "datetimerange"
            },
            {
              type: "userOnly",
              label: "创建人",
              model: "createByName",
              idsStr: "createBy",
              placeholder: "请输入"
            },
            {
              label: "计划时间",
              model: "queryTime",
              type: "datetimerange"
            },
            {
              label: "工单来源",
              model: "sourceId",
              type: "select",
              option: this.$store.getters["dirtData"]("order_source")
            }
          ]
        },
        actionList: [
          {
            name: "新建",
            icon: "el-icon-plus",
            disabled: !this.$store.getters["isBtnAuth"]("add"),
            content: this.$store.getters["isBtnAuth"]("add")
              ? null
              : "未授权此功能！",
            method: row => {
              this.toAdd();
            }
          }
        ],
        column: [
          {
            label: "状态",
            prop: "status",
            scopeType: "formate",
            method: row => {
              let dom = "";
              let statusName =
                this.$store.getters["fineDirtDataName"](
                  "overhaul_status",
                  row.status
                ) || row.status;
              let colorStatus = row.signal;
              if (row.status == "DEPRECATED") {
                dom =
                  '<span class="gray" title="废弃工单">' +
                  statusName +
                  "</span>";
              } else {
                if (colorStatus == "onTime") {
                  //正常
                  dom =
                    '<span class="normal" title="按期的工单">' +
                    statusName +
                    "</span>";
                } else if (colorStatus == "expiring") {
                  //即将到期
                  dom =
                    '<span class="remind" title="即将到期的工单">' +
                    statusName +
                    "</span>";
                } else if (colorStatus == "expired") {
                  //超期
                  dom =
                    '<span class="warning" title="已超期工单">' +
                    statusName +
                    "</span>";
                }
              }
              return dom;
            },
            sortable: "custom",
            minWidth: "110px"
          },
          {
            label: "编号",
            prop: "code",
            sortable: "custom"
          },
          {
            label: "标题",
            prop: "title",
            sortable: "custom"
          },
          {
            label: "设备管理单位",
            id: "deptManage",
            prop: "deptManageName",
            sortable: "custom"
          },
          {
            label: "作业单位",
            id: "deptWork",
            prop: "deptWorkName",
            sortable: "custom"
          },
          {
            label: "计划开始时间",
            prop: "startTime",
            sortable: "custom",
            minWidth: "140px"
          },
          {
            label: "计划结束时间",
            prop: "endTime",
            sortable: "custom",
            minWidth: "140px"
          },
          {
            label: "工单来源",
            prop: "sourceId",
            formatter: row => {
              let value = row.sourceId;
              return (
                this.$store.getters["fineDirtDataName"](
                  "order_source",
                  value
                ) || value
              );
            },
            sortable: "custom",
            minWidth: "110px"
          },
          {
            label: "创建人",
            prop: "createByName",
            sortable: "custom",
            minWidth: "90px"
          },
          {
            label: "创建时间",
            prop: "createTime",
            textAlign: "center",
            sortable: "custom",
            minWidth: "160px"
          }
        ],
        //表格方法
        tableMethods: {
          //点击行的方法
          rowClick: val => {
            this.gotoDetails(val);
          }
        }
      }
    };
  },
  watch: {},
  computed: {},
  created() {
    /* 添加监听事件 */
    window.addEventListener("storage", this.updateData);
  },
  beforeDestroy() {
    /* 删除监听事件 */
    window.removeEventListener("storage", this.updateData);
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.$refs.klTable.getTableConfig(); //需要显示过滤器以及自定义列时要提前调用,不需要过滤器时不调用
    },
    updateData() {
      this.$refs.klTable.searchData();
    },
    getTableData(params, sortStr) {
      let form = { ...params };
      if (sortStr) {
        form.orders = sortStr;
      }
      if (form.queryTime) {
        form.planStartTime = form.queryTime[0];
        form.planEndTime = form.queryTime[1];
        delete form.queryTime;
      }
      /* 设备管理单位 */
      if (form.deptManageList) {
        form.deptManageList = form.deptManageList.split(",");
      }
      if (form.deptManage) {
        form.deptManage = form.deptManage.split(",");
      }
      /* 作业单位 */
      if (form.deptWorkList) {
        form.deptWorkList = form.deptWorkList.split(",");
      }
      if (form.deptWork) {
        form.deptWork = form.deptWork.split(",");
      }
      getListApi(form)
        .then(res => {
          let data = res.data || [];
          this.$set(this.tableSetting, "tableData", data.list || []);
          this.$set(this.tableSetting, "totalNumber", data.total);
        })
        .catch(e => {
          this.$set(this.tableSetting, "tableData", []);
          this.$set(this.tableSetting, "totalNumber", 0);
        });
    },
    //打开详情页
    gotoDetails(data) {
      if (data) {
        this.pageType = "edit";
      }
      let form = {
        pageType: this.pageType
      };
      if (this.pageType != "add") {
        form.id = data.id;
        // form.status = data.status;
      }
      let { href } = this.$router.resolve({
        path: "/orderManagement/ycOverhaul/details",
        query: form
      });
      window.open(href, "_blank");
    },
    //新建
    toAdd() {
      this.pageType = "add";
      this.gotoDetails();
    }
  }
};
</script>
<style lang="less" scoped>
.overhaul {
  min-height: 500px;
  height: 100%;
  .constentmain {
    position: relative;
  }
  .tableContent {
    min-height: 500px;
    height: 100%;
  }
}
</style>